<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type Node from "element-plus/es/components/tree/src/model/node";
// mock数据11
import axios from "axios";
// 请求数据的方法（请求接口url要与mock中定义的url相同）
// const getTableList = async () => {
//   axios.get("/home/getDeviceOne").then((res) => {
//     console.log("device1 res", res);
//     treeData = res.data.data.result.devTreeList;
//     console.log("treeData", treeData);
//   });
// };
// onMounted(() => {
//   getTableList();
// });

/* mock */
let api = "/user/userinfo";
// 方法一
axios.get(api).then((res) => {
  console.log(res, "返回数据");
});
// 方法二
axios.get("/account?username=abc&password=123456").then((res) => {
  console.log(res, "返回数据");
});

const isOpen = ref(false);

// 展开和收起
const unfoldAdaption = () => {
  isOpen.value = !isOpen.value;
};

const props = {
  expandTrigger: "hover" as const,
  checkStrictly: true,
};

const handleChange = (value: any) => {
  console.log(value);
};

// const value1 = ref(["one", "two", "three"]);
let value1 = ["guide", "disciplines"]; // 设置默认显示，必须是options中对应的数值，并且要在props中设置 checkStrictly: true,
const options = [
  {
    value: "guide",
    label: "Guide",
    children: [
      {
        value: "disciplines",
        label: "Disciplines",
        children: [
          {
            value: "consistency",
            label: "Consistency",
          },
          {
            value: "feedback",
            label: "Feedback",
          },
          {
            value: "efficiency",
            label: "Efficiency",
          },
          {
            value: "controllability",
            label: "Controllability",
          },
        ],
      },
      {
        value: "navigation",
        label: "Navigation",
        children: [
          {
            value: "side nav",
            label: "Side Navigation",
          },
          {
            value: "top nav",
            label: "Top Navigation",
          },
        ],
      },
    ],
  },
  {
    value: "component",
    label: "Component",
    children: [
      {
        value: "basic",
        label: "Basic",
        children: [
          {
            value: "layout",
            label: "Layout",
          },
          {
            value: "color",
            label: "Color",
          },
          {
            value: "typography",
            label: "Typography",
          },
          {
            value: "icon",
            label: "Icon",
          },
          {
            value: "button",
            label: "Button",
          },
        ],
      },
      {
        value: "form",
        label: "Form",
        children: [
          {
            value: "radio",
            label: "Radio",
          },
          {
            value: "checkbox",
            label: "Checkbox",
          },
          {
            value: "input",
            label: "Input",
          },
          {
            value: "input-number",
            label: "InputNumber",
          },
          {
            value: "select",
            label: "Select",
          },
          {
            value: "cascader",
            label: "Cascader",
          },
          {
            value: "switch",
            label: "Switch",
          },
          {
            value: "slider",
            label: "Slider",
          },
          {
            value: "time-picker",
            label: "TimePicker",
          },
          {
            value: "date-picker",
            label: "DatePicker",
          },
          {
            value: "datetime-picker",
            label: "DateTimePicker",
          },
          {
            value: "upload",
            label: "Upload",
          },
          {
            value: "rate",
            label: "Rate",
          },
          {
            value: "form",
            label: "Form",
          },
        ],
      },
      {
        value: "data",
        label: "Data",
        children: [
          {
            value: "table",
            label: "Table",
          },
          {
            value: "tag",
            label: "Tag",
          },
          {
            value: "progress",
            label: "Progress",
          },
          {
            value: "tree",
            label: "Tree",
          },
          {
            value: "pagination",
            label: "Pagination",
          },
          {
            value: "badge",
            label: "Badge",
          },
        ],
      },
      {
        value: "notice",
        label: "Notice",
        children: [
          {
            value: "alert",
            label: "Alert",
          },
          {
            value: "loading",
            label: "Loading",
          },
          {
            value: "message",
            label: "Message",
          },
          {
            value: "message-box",
            label: "MessageBox",
          },
          {
            value: "notification",
            label: "Notification",
          },
        ],
      },
      {
        value: "navigation",
        label: "Navigation",
        children: [
          {
            value: "menu",
            label: "Menu",
          },
          {
            value: "tabs",
            label: "Tabs",
          },
          {
            value: "breadcrumb",
            label: "Breadcrumb",
          },
          {
            value: "dropdown",
            label: "Dropdown",
          },
          {
            value: "steps",
            label: "Steps",
          },
        ],
      },
      {
        value: "others",
        label: "Others",
        children: [
          {
            value: "dialog",
            label: "Dialog",
          },
          {
            value: "tooltip",
            label: "Tooltip",
          },
          {
            value: "popover",
            label: "Popover",
          },
          {
            value: "card",
            label: "Card",
          },
          {
            value: "carousel",
            label: "Carousel",
          },
          {
            value: "collapse",
            label: "Collapse",
          },
        ],
      },
    ],
  },
  {
    value: "resource",
    label: "Resource",
    children: [
      {
        value: "axure",
        label: "Axure Components",
      },
      {
        value: "sketch",
        label: "Sketch Templates",
      },
      {
        value: "docs",
        label: "Design Documentation",
      },
    ],
  },
];

/* 树形 */
interface Tree {
  name: string;
  id: string;
  leaf?: boolean;
  psrId?: string;
}

const treeProps = {
  label: "nodeName",
  children: "childNodeList",
  isLeaf: "leaf",
};
let treeData: any[] = [];
const treeKey = ref(0);
const openShow = ref(false);
const isLazy = ref(true);
const handleSearch = () => {
  isLazy.value = false;
  openShow.value = true;
  treeKey.value = +new Date();
  console.log(treeKey.value);
};

let retuData: any[] = [];

/* tree 树形懒加载 */
const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
  console.log("node.level:", node.level);

  if (node.level === 0) {
    axios.get("/home/getDeviceOne").then((res) => {
      // console.log("device1 res", res);
      treeData = res.data.data.result.devTreeList;
      console.log("treeData", treeData);
      return resolve(treeData);
    });
  }

  if (node.level === 1) {
    axios.get("/home/getDeviceTwo").then((res) => {
      console.log("device2 res", res);
      return resolve(res.data.data.result.devTreeList);
    });
  }

  if (node.level === 2) {
    axios.get("/home/getDeviceThree").then((res) => {
      console.log("device3 res", res);
      return resolve(res.data.data.result.devTreeList);
    });
  }
  // if (node.level > 1) {
  //   return resolve([]);
  // }
};

/* 递归函数 */
const getTreeItem = (data: any, psrId?: string) => {
  data.forEach((item: any) => {
    // console.log(item);
    if (item.psrId === psrId) {
      const resData = [
        {
          id: "5c087d484a6becc3bb05ea3ee4607bc4",
          psrId: "20DKX-2525",
          name: "10kV彩岸928",
          leaf: true,
        },
        {
          id: "1bc2ed2e3bbe9547822561648288aa29",
          psrId: "20DKX-7508",
          name: "10kV彩代风二941",
          leaf: true,
        },
      ];
      // 模拟调用后端接口
      setTimeout(() => {
        item["children"] = resData;
        retuData = resData;
        console.log("333", treeData);
      }, 500);
    }
    // 判断当前对象是否还有下一级，调用递归函数
    if (item.children) {
      getTreeItem(item.children, psrId);
    }
  });
};

const dataObj = [
  {
    id: "56bf5647b5e3c26444bee3622a8fd982",
    name: "国网重庆市区供电公司",
    children: [
      {
        id: "b0af7cb0424539f7a9cd87015e0953dc",
        psrId: "4D2B99D4-2B65-4B3E-93EA-48B69DECE2EB-77667",
        name: "110kV彩云湖变电站",
        geoPositon: "106.481292110611,29.519588754364648",
        children: [
          {
            id: "5c087d484a6becc3bb05ea3ee4607bc4",
            psrId: "20DKX-2525",
            name: "10kV彩岸928",
            leaf: true,
          },
          {
            id: "1bc2ed2e3bbe9547822561648288aa29",
            psrId: "20DKX-7508",
            name: "10kV彩代风二941",
            leaf: true,
          },
        ],
      },
      {
        id: "2c00384d51dae81cd269fc96be8a39dc",
        psrId: "7dcd641e118a398a5a7d380da0017d7dccd8295393",
        name: "110kV陈家坝变电站",
        geoPositon: "106.4919204093775,29.4176377028374",
      },
      {
        id: "8941567e1e15b7d6623854817f1862e6",
        psrId: "1fa3000b5b8a398aa1589cefa401591fa1b1e4550f",
        name: "110kV镁桥变电站",
        geoPositon: "106.48655929559801,29.44671835116445",
      },
    ],
  },
];
</script>

<template>
  <div>
    <el-form ref="queryRef" :inline="true">
      <el-form-item label="输入规则名称" prop="ruleName">
        <el-input placeholder="请输入内容" clearable />
      </el-form-item>
      <el-form-item label="规则状态" prop="ruleType">
        <el-select placeholder="请选择" popper-class="changeSelect" clearable>
          <el-option
            v-for="(item, index) in ['启用', '停用']"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="错误级别" prop="errorType">
        <el-select placeholder="请选择" popper-class="changeSelect" clearable>
          <el-option
            v-for="(item, index) in ['错误', '警告']"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <div class="box_content_button">
        <div v-if="isOpen" class="open-btn-style">
          <el-button @click="unfoldAdaption">
            <span class="title">收起</span>
            <el-icon class="arrow-down" color="#0D867F" :size="16"
              ><DArrowLeft
            /></el-icon>
          </el-button>
        </div>
        <div v-if="!isOpen" class="open-btn-style">
          <el-button @click="unfoldAdaption">
            <span class="title">展开</span>
            <el-icon class="arrow-down" color="#0D867F" :size="16"
              ><DArrowRight
            /></el-icon>
          </el-button>
        </div>
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </div>
      <div v-if="isOpen">
        <el-form-item label="是否强制执行" prop="isEnforcement">
          <el-select placeholder="请选择" popper-class="changeSelect" clearable>
            <el-option
              v-for="(item, index) in ['是', '否']"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </div>
      <div v-if="isOpen">
        <el-form-item label="是否强制执行" prop="isEnforcement">
          <el-select placeholder="请选择" popper-class="changeSelect" clearable>
            <el-option
              v-for="(item, index) in ['是', '否']"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <div class="Cascader">
      <div class="m-4">
        <p>级联菜单，hover效果</p>
        <el-cascader
          v-model="value1"
          :options="options"
          :props="props"
          @change="handleChange"
        />
      </div>
    </div>
    <div class="layout">
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="aaa grid-content ep-bg-purple">3</div></el-col
        >
        <el-col :span="6"
          ><div class="aaa grid-content ep-bg-purple-light">3</div></el-col
        >
        <el-col :span="6"
          ><div class="aaa grid-content ep-bg-purple-light">3</div></el-col
        >
        <el-col :span="6" v-if="!isOpen"
          ><div class="aaa grid-content ep-bg-purple">
            <el-button type="primary" @click="unfoldAdaption">展开</el-button>
          </div></el-col
        >
        <el-col :span="6" v-if="isOpen"
          ><div class="aaa grid-content ep-bg-purple">
            <el-button type="primary" @click="unfoldAdaption">收起</el-button>
          </div></el-col
        >
        <el-col :span="6" v-if="isOpen"
          ><div class="aaa grid-content ep-bg-purple-light">00</div></el-col
        >
        <el-col :span="6" v-if="isOpen"
          ><div class="aaa grid-content ep-bg-purple-light">00</div></el-col
        >
      </el-row>
    </div>
    <el-button type="primary" @click="getTreeItem(dataObj)">调用递归</el-button>
    <el-button type="primary" @click="handleSearch">去首页</el-button>
    <el-tree
      :key="treeKey"
      :data="treeData"
      node-key="id"
      :lazy="isLazy"
      :default-expand-all="openShow"
      :default-expanded-keys="['aaa']"
      :props="treeProps"
      :load="loadNode"
    />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-form) {
  display: grid;
  column-gap: 20px;
  row-gap: 10px;
  // grid-template-columns: repeat(4, auto);
  grid-template-columns: repeat(4, 377px);
  justify-content: space-between;
  grid-template-areas:
    "a b c d"
    "e f g h";
  .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    .el-input__wrapper {
      width: 259px;
    }
  }
}

.box_content_button {
  grid-area: d;
  display: flex;
  justify-content: flex-end;

  align-items: center;
  &:deep(.el-button) {
    width: 104px;
    height: 32px;
  }
  .open-btn-style {
    display: inline-block;
    ::v-deep(.el-button) {
      width: 49px;
      height: 32px;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #e5e5e5;
      margin-right: 10px;
      .title {
        font-size: 12px;
        font-family: "思源黑体";
        font-weight: 400;
        color: #666666;
        line-height: 14px;
      }
    }
  }
}
.Cascader {
  margin: 10px;
}

:deep(.el-row, .el-row:last-child) {
  margin-bottom: 20px;
}

:deep(.el-col) {
  border-radius: 4px;
  // background-color: plum;
  // border: 1px solid red;
}
// :deep(.el-row:nth-of-type(4)) {
//   background-color: green;
//   border: 1px solid red;
// }

:deep(.grid-content) {
  border-radius: 4px;
  min-height: 36px;
}
.aaa {
  background: lightcyan;
}
</style>
